<template>

  <Select :options="selectOpts" :allowClear="true" placeholder="请选择角色名称" v-bind="$attrs" :max-tag-count="1">
    <template v-slot:maxTagPlaceholder="el">
      <Tooltip :title="hiddenPlaceholder(el)">
        <span>...{{ el.length }}</span>
      </Tooltip>
    </template>
  </Select>
</template>

<script lang="ts" setup>
import { Tooltip, Select } from "ant-design-vue";
import type { SelectProps } from "ant-design-vue";
import { useRoleListStore } from "~/store/modules/role";
import { computed } from "vue";


const role = useRoleListStore();


const selectOpts = computed(() => {
  return [
    { label: "全部", value: null },
    ...role.roleList,
  ];
});




const hiddenPlaceholder = (list: SelectProps["options"]) => {
  return list.map(el => el.label).join(",");
};

</script>
